 <template>
  <!-- 使用高德地图 复制来源：https://blog.csdn.net/weixin_43526371/article/details/110110429 -->
  <!-- 使用 echarts-extension-amap+echarts 不需要安装高德地图依赖，外加AMapLoader辅助，至于他们是干嘛的，为啥这么写，不清楚...-->
  <div class="home">
    <div id="map" :style="{height:_mapHeight+'px'}"></div>
  </div>
</template>
<script>
import Amap from 'Vue-Amap'
import AMapLoader from "@amap/amap-jsapi-loader";
import * as echarts from "echarts"; // 注意：ECharts 5.0 之后需要改为 import * as echarts from "echarts";
import "echarts-extension-amap";

export default {
  data() {
    return {
      _mapHeight:this.getRealPX(604)
    };
  },
  props:{
    mapHeight:{
      type:Number,
      default:604
    }
  },
  watch:{
    mapHeight:{
      immediate:true,
      handler(val){
        this._mapHeight = this.getRealPX(val)
      }
    },
  },
  mounted() {
    console.error(Amap)
    this.initMap();
  },
  methods: {
    getPoints() {
      return [
        {
          name: "古交市矾石沟煤焦有限公司",
          value: [112.176178, 37.919127],
        },
        {
          name: "山西古交煤焦集团白家沟煤业有限公司",
          value: [112.118151, 37.973507],
        },
        {
          name: "山西古交煤焦集团金之中煤业有限公司",
          value: [112.09937, 37.932752],
        },
        {
          name: "山西煤炭运销集团古交辽源煤业有限公司",
          value: [112.169457, 37.906643],
        },
        {
          name: "古交市千峰精煤有限公司",
          value: [112.250302, 37.884805],
        },
      ];
    },
    initMap() {
      let points = this.getPoints();

      let colors = ["#FF8C00", "#00acea", "#1DE9B6"];
      let fontsize = this.getRealPX(15); 
      let option = {
        //amap地图配置
        amap: {
          center: [112.051506,37.93998], //设置中心点 
          polygon: [],
          resizeEnable: true, //是否监控地图容器尺寸变化
          features: ["bg", "road", "point"], //隐藏默认楼块
          mapStyle: "amap://styles/5510aa13ca0e3d04d1c5daf499cdcab4", //设置地图的显示样式
          zoom: 10, //地图显示的缩放级别
          zooms:[10,12], //设置缩放级别范围 10-12 级
        },
        animation: true,

        color: ["#FF8C00", "#00acea", "#1DE9B6"],
        tooltip: {
          trigger: "item",
          formatter: "{b}",
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "amap",
            rippleEffect: {
              period: 5,
              scale: 5,
              brushType: "fill",
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              offset: [15, 0],
              color: (param) => colors[param.dataIndex % colors.length],
              show: true,
              fontSize: fontsize,
            },
            itemStyle: {
              color: (param) => {
                return colors[param.dataIndex % colors.length];
              },
              shadowBlur: 10,
              shadowColor: "#333",
              opacity: 0.75,
            },
            emphasis: {
              itemStyle: {
                opacity: 1, //线条宽度
              },
            },
            data: points,
          },
          {
            type: "lines",
            coordinateSystem: "amap",
            zlevel: 3,
            symbolSize: 7,
            effect: {
              show: true,
              period: 4,
              trailLength: 0.02,
              symbol: "circle",
              symbolSize: 4,
              color: "#fff",
            },
            symbol: ["none", "arrow"],
            lineStyle: {
              width: 0.5, //线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowBlur: 10,
            },
            emphasis: {
              lineStyle: {
                width: 2, //线条宽度
              },
            },
            data: [
              {
                name: "古交市矾石沟煤焦有限公司->山西古交煤焦集团白家沟煤业有限公司",
                value: 40,
                coords: [
                  [112.176178, 37.919127],
                  [112.118151, 37.973507],
                ],
              },
            ],
          },
          {
            type: "lines",
            coordinateSystem: "amap",
            zlevel: 2,
            effect: {
              show: true,
              period: 4,
              trailLength: 0.02,
              symbol: "circle",
              symbolSize: 4,
              color: "#fff",
            },
            symbol: ["none", "arrow"],
            lineStyle: {
              width: 0.5, //线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowBlur: 10,
            },
            emphasis: {
              lineStyle: {
                width: 2, //线条宽度
              },
            },
            data: [
              {
                name: "山西古交煤焦集团白家沟煤业有限公司->山西古交煤焦集团金之中煤业有限公司",
                value: 40,
                coords: [
                  [112.118151, 37.973507],
                  [112.09937, 37.932752],
                ],
              },
            ],
          },
        ],
      };

      // AMapLoader.load({
      //   key: "26c4b73259ad751669c12e55f9f36463", // 申请好的Web端开发者Key，首次调用 load 时必填
      //   version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      //   plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      //   AMapUI: {
      //     // 是否加载 AMapUI，缺省不加载
      //     version: "1.1", // AMapUI 缺省 1.1
      //     plugins: [], // 需要加载的 AMapUI ui插件
      //   },
      //   Loca: {
      //     // 是否加载 Loca， 缺省不加载
      //     version: "1.3.2", // Loca 版本，缺省 1.3.2
      //   },
      // }).then((AMap) => {
        let chart = echarts.init(document.getElementById("map"));

        chart.setOption(option);
        let amap = chart.getModel().getComponent("amap").getAMap();
        var that = this;
        if (that.polygon) {
          that.map.remove(that.polygon);
        }

        AMap.plugin("AMap.DistrictSearch", function () {
          new AMap.DistrictSearch({
            extensions: "all",
            subdistrict: 0,
          }).search("古交市", function (status, result) {
            // 外多边形坐标数组和内多边形坐标数组
            var outer = [
              new AMap.LngLat(-360, 90, true),
              new AMap.LngLat(-360, -90, true),
              new AMap.LngLat(360, -90, true),
              new AMap.LngLat(360, 90, true),
            ];
            var holes = result.districtList[0].boundaries;
            console.log(holes);
            var pathArray = [outer];
            pathArray.push.apply(pathArray, holes);
            that.polygon = new AMap.Polygon({
              pathL: pathArray,
              strokeColor: "#4ea8f8", //城市边界颜色
              strokeWeight: 1,
              fillColor: "#0e215b", // 遮罩背景色黑色
              fillOpacity: 1,
            });
            that.polygon.setPath(pathArray);
            amap.add(that.polygon);
             amap.on('click', e=>{
               console.error(e.lnglat.getLng()+','+e.lnglat.getLat())
             });
          });
        });
      // });
    },
  },
};
</script>
<style lang="stylus" scoped>
#map {
  width: 607px;
  height: 604px;
}
</style>
